<script setup lang="ts">

import {FormInst} from "naive-ui";
import { h ,ref,onMounted} from 'vue'
import { NButton, useMessage,NAvatar,NSwitch,useLoadingBar} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import {users} from "../../api/user.ts";

import AddSlide from "./components/AddSlide.vue";


const message = useMessage()
const loadingBar = useLoadingBar()
const formRef = ref<FormInst | null>(null)

const rules = ref({

        name: {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
        },
        email: {
            required: true,
            message: '请输入邮箱',
            trigger: ['input', 'blur']
        }

})
const formSeach = ref({

    name:'',
    email:''

})

const handleValidateClick = (e) => {
    e.preventDefault()
    getUserList({
        name:formSeach.value.name,
        email:formSeach.value.email,
        current:1
    })
}

type Song = {
    no: number
    title: string
    length: string
}

const createColumns = ({
                           play
                       }: {
    play: (row: Song) => void
}): DataTableColumns<Song> => {
    return [
        {
            title: '头像',
            key: 'avatar_url',
            render(row){

                return h(
                    NAvatar,
                    {round:true,src:row.avatar_url,size:'medium'}

                )
            }
        },
        {
            title: '姓名',
            key: 'name'
        },
        {
            title: '邮箱',
            key: 'email'
        },
        {
            title: '是否禁用',
            key: 'status',
            render(row){
                return h(
                    NSwitch,
                    {

                        size:'medium',
                        color:'#1890ff',
                        activeColor:'#52c41a',
                        activeValue:1,
                        inactiveValue:0,
                        value:row.is_locked == 1?false:true
                    }

                )
            }
        },
        {
            title: '创建时间',
            key: 'created_at',

        },
        {
            title: '操作',
            key: 'status',
            render(row){
                return h(
                    NButton,
                    {
                        size:'small',
                        color:'#1890ff',
                        strong:true,
                        // text:'编辑',
                        onClick:()=>{

                            message.info('编辑'+row.name)
                        }

                    },'编辑'

                )
            }

        }
    ]
}

const data = ref([])

const columns= createColumns ({
    play (row: Song) {
        message.info(`Play ${row.title}`)
    }
})
const pagination= false as const

const page = ref(1)
const totalPage = ref(0)

onMounted(()=>{
    getUserList({})
})
// 点击分页的数字跳转
const updatePage = (pageNum) => {
    page.value = pageNum
    getUserList({
        current:pageNum,
        name:formSeach.value.name,
        email:formSeach.value.email
    })
}
const getUserList = (params) =>{
    loadingBar.start()
    users(params).then(res => {
        data.value = res.data.data
        totalPage.value = res.data.meta.pagination.total_pages
        page.value = res.data.meta.pagination.current_page
        loadingBar.finish()
    }).catch(err=>{
        loadingBar.error()
    })
}
const searchAgain = () => {
    getUserList({})
    formSeach.value.name=''
    formSeach.value.email=''

}

const showModal = ref(false)
const changeModal = (status) => {
    showModal.value = status
}
const reload = () => {
    getUserList({
        current:page.value,
        name:formSeach.value.name,
        email:formSeach.value.email
    })
}

// const user_id = ref('')
// const showEditModal = ref(false)
//
// const changeEditModal = (show:boolean) => {
//     showEditModal.value = show
// }

</script>

<template>
    <div>
        <div class="h-24 w-full bg-white p-3 mb-6" style="text-align: left">
            <div>
                <span class="text-slate-400 pr-1">首页</span> / <span class="pl-1 text-slate-400">轮播图管理</span>
                <div class="pt-3 text-xl text-black font-bold">轮播图管理</div>
            </div>

        </div>
        <div class="content px-4">
            <div class="bg-white pt-4 pr-6">
                <n-form
                        ref="formRef"
                        inline
                        :label-width="80"
                        :model="formSeach"
                        :rules="rules"
                        size='medium'
                        label-placement="left"
                >
                    <n-form-item label="姓名" path="name">
                        <n-input v-model:value="formSeach.name" placeholder="输入姓名" />
                    </n-form-item>
                    <n-form-item label="邮箱" path="email">
                        <n-input v-model:value="formSeach.email" placeholder="输入邮箱" />
                    </n-form-item>

                    <n-form-item class="ml-auto">
                        <n-button class="mr-4" attr-type="button" @click="searchAgain">
                            重置
                        </n-button>
                        <n-button type="info" attr-type="button" @click="handleValidateClick">
                            搜索
                        </n-button>
                    </n-form-item>
                </n-form>
            </div>
            <div class="mt-4 bg-white">
                <div class="text-l pl-4 py-4 text-left flex">
                    <span class="text-xl font-bold">轮播图列表</span>
                    <span class="ml-auto pr-6"><n-button type="info" @click="showModal = true">+ 新建</n-button></span>

                </div>
                <div>
                    <n-data-table
                            :columns="columns"
                            :data="data"
                            :pagination="pagination"
                            :bordered="false"
                    />
                </div>
                <div class="p-4 flex justify-end pr-10">
                    <n-pagination v-model:page="page" @update:page="updatePage" :page-count="totalPage" />
                </div>
            </div>
            <AddSlide v-if="showModal" :showModal="showModal" @changeModal="changeModal" @reloadTable="reload"></AddSlide>

        </div>
    </div>
</template>

<style scoped>

</style>